<template>
	<view>
		<view class="watch_list" v-for="(item,index) in watching" :key="index" @click="toVideoDetail(item)">
			<image class="watch-pic" :src="item.tv_image|handlePic"></image>
			<view>
				<u-gap height="40"></u-gap>
				<view class="tv_name">{{item.tv_name}}</view>
				<u-gap height="40"></u-gap>
				<view style="color: #333;font-size: 30rpx;">第{{item.series||'1'}}集</view>
			</view>
		</view>
		<u-gap height="30"></u-gap>
	</view>
</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import {hideLoading} from "../../utils/utils";

export default {
    mixins: [common_mixin],
		data() {
			return {
				page: 1,
				watching: [],
			}
		},
		async onLoad() {
		},
		async onShow() {
      this.page=1;
      this.watching = await this.getList();
			hideLoading();
		},
		async onReachBottom() {
			const moreList = await this.getList();
			this.watching = this.watching.concat(moreList)
		},
		methods: {
			async getList() {
        const resp = await this.$api.getLikeList({page:this.page})
        this.page = this.page + 1
        return resp.data
      }
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
	}

	.watch_list {
		display: flex;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.tv_name {
		font-size: 32rpx;
		font-weight: 600;
		width: 500rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.watch-pic {
		width: 167rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin: 14rpx 30rpx 14rpx 14rpx;
	}
</style>
